<template>
	<div>
		<Header></Header>
		<div class="projects">
			<!-- Form -->
			<el-button type="text" @click="dialogFormVisible = true"></el-button>
			<!-- 添加项目 -->
			<el-dialog :visible.sync="dlgAdd">
				<div slot="title" class="dlgtitle">添加项目</div>
				<!-- 标签页 -->
				 <el-tabs type="border-card">
				    <el-tab-pane label="项目信息">
						<el-form ref='addProjectRef' :model="addProData" :rules="addRulues">
							<el-form-item prop="name">
								<el-input v-model="addProData.name" autocomplete="off">
									    <template slot="prepend">项目名称</template>
								</el-input>
							</el-form-item>
						
							<el-form-item prop="leader">
								<el-input v-model="addProData.leader" autocomplete="off">
									<template slot="prepend">项目负责人</template>
								</el-input>
							</el-form-item>
						
							<el-form-item prop="desc">
						 	<el-input v-model="addProData.desc" autocomplete="off">
								<template slot="prepend">项目描述</template>
							</el-input>
							</el-form-item>
						
						</el-form>
					</el-tab-pane>
				    <el-tab-pane label="项目环境" name="second">项目</el-tab-pane>
				  </el-tabs>
				  
				<div slot="footer" class="dialog-footer">
					<el-button @click="dlgAdd = false" size="mini">取 消</el-button>
			 	<el-button type="primary" @click="addPro" size="mini">确 定</el-button>
				</div>
			</el-dialog>

			<!-- 编辑项目 -->
			<el-dialog :visible.sync="dlgEdit">
				<div slot="title" class="dlgtitle">编辑项目</div>
						<el-form ref='editProjectRef' :model="eidtProData" :rules="addRulues">
							<el-form-item prop="name">
								<el-input v-model="eidtProData.name" autocomplete="off">
									    <template slot="prepend">项目名称</template>
								</el-input>
							</el-form-item>
						
							<el-form-item prop="leader">
								<el-input v-model="eidtProData.leader" autocomplete="off">
									<template slot="prepend">项目负责人</template>
								</el-input>
							</el-form-item>
						
							<el-form-item prop="desc">
						 	<el-input v-model="eidtProData.desc" autocomplete="off">
								<template slot="prepend">项目描述</template>
							</el-input>
							</el-form-item>
						
						</el-form>
					</el-tab-pane>
				  
				<div slot="footer" class="dialog-footer">
					<el-button @click="dlgEdit = false" size="mini">取 消</el-button>
			 	<el-button type="primary" @click="updatPro" size="mini">确 定</el-button>
				</div>
			</el-dialog>
			
			<!-- 顶部按钮和线 -->
			<div class="top_btn">
				<el-button type='primary' size="mini" icon='el-icon-plus' @click='dlgAdd=true'>创建项目</el-button>
			</div>
			<!-- 所有的项目列表 -->
			<div class="pro_list">
				<el-row :gutter="20">
					<el-col :span="8" v-for="pro in proList" :key='pro.id'>
						<el-card class="box-card" :body-style="{padding: 0 }">
							<el-col :span='12'>
								<div class="icon">
									<i class="el-icon-reading"></i>
								</div>
							</el-col>
							<el-col :span='12'>
								<div class="pro-info">
									<!-- 点击项目名称，跳转至首页 -->
									<div class="name" @click="selectPro(pro)">{{pro.name}}</div>
									<div class="info">
										<el-row>
											<el-col :span='12'>
												<div style="font-weight: bold; color: #919191;text-indent: 10px;">负责人:
													{{pro.leader}}</div>
											</el-col>
											<el-col :span='12'>
												<el-col :span="17">
													<el-dropdown @command='cmdHandle(pro, $event)'>
														<span class="el-dropdown-link">
															更多操作<i class="el-icon-arrow-down el-icon--right"></i>
														</span>
														<el-dropdown-menu slot="dropdown">
															<el-dropdown-item command='edit' style='color: #409EFF;'><i
																	class="el-icon-edit-outline"></i>编辑
															</el-dropdown-item>
															<el-dropdown-item command='del' style='color: red;'><i
																	class="el-icon-delete"></i>删除</el-dropdown-item>
														</el-dropdown-menu>
													</el-dropdown>
												</el-col>
											</el-col>
										</el-row>
									</div>
								</div>
							</el-col>
						</el-card>

					</el-col>
					<!-- 					<el-col :span="8">
						<el-card class="box-card":body-style='{padding: 0}'>
							2
						</el-card>
					</el-col> -->
					<el-col :span="8">
						<el-card class="box-card" :body-style='{padding: 0}'>
							<div class="add" @click='dlgAdd=true'>
								<i class="el-icon-plus"></i>
							</div>
						</el-card>
					</el-col>
				</el-row>

			</div>

		</div>
	</div>
</template>

<script>
	import Header from '../components/header.vue'
	import {mapMutations} from 'vuex'
	export default {
		data() {
			return {
				proList: [],
				// 控制添加项目的弹窗或隐藏
				dlgAdd: false,
				addProData: {
					name: "",
					leader: "",
					desc: ""
				},
				// 控制编辑项目的弹窗或隐藏
				dlgEdit: false,
				eidtProData: {
					name: "",
					leader: "",
					desc: ""
				},
				// 定义新增表单校验规则
				addRulues: {
					name: [{
						required: true,
						message: "请输入项目名称",
						trigger: 'blur'
					},
					{
						min: 1,
						max: 10,
						message: "项目名称长度为1-10个字",
						trigger: 'blur'
					}],
					leader: [{
							required: true,
							message: "请输入负责人名称",
							trigger: 'blur'
						},
						{
							min: 2,
							max: 6,
							message: "负责人名称为2-6个字",
							trigger: 'blur'
						}],
					desc: [{
							required: false,
							trigger: 'blur'
						},
						{
							min: 0,
							max: 30,
							message: "描述长度为30个字符",
							trigger: 'blur'
						}
					]
				},
				// 定义编辑表单校验规则
				editRulues: {
					name: [{
						required: true,
						message: "请输入项目名称",
						trigger: 'blur'
					},
					{
						min: 1,
						max: 10,
						message: "项目名称长度为1-10个字",
						trigger: 'blur'
					}],
					leader: [{
							required: true,
							message: "请输入负责人名称",
							trigger: 'blur'
						},
						{
							min: 2,
							max: 6,
							message: "负责人名称为2-6个字",
							trigger: 'blur'
						}],
					desc: [{
							required: false,
							trigger: 'blur'
						},
						{
							min: 0,
							max: 30,
							message: "描述长度为30个字符",
							trigger: 'blur'
						}
					]
				}
			}
		},
		components: {
			Header
		},
		methods: {
			// 处理下拉菜单的方法
			cmdHandle(pro, cmd) {
				if (cmd === 'edit') {
					// 编辑项目（修改）
					this.dlgEdit = true;
					// 编辑时,复制之前新增的内容,回显在编辑框
					this.eidtProData = {...pro}
					// this.editPro(id)
				} else if (cmd === 'del') {
					// 删除项目
					this.delPro(pro.id)
				}
			},
			// 删除项目
			async delPro(id) {
				let resopnse = await this.$http.delProject(id)
				if (resopnse.status === 204) {
					this.getPro()
					this.$message({
						message: "删除成功",
						type: 'success',
						duration: 1000
					})
				} else {
					this.$message({
						message: "删除失败",
						type: 'error',
						duration: 1000
					});
				}
			},
			// 获取项目
			async getPro() {
				let response = await this.$http.getPorject()
				this.proList = response.data.results
			},
			
			// 添加项目
			addPro(){
				this.$refs.addProjectRef.validate(async res => {
					if(res){
						let response = await this.$http.addProject(this.addProData);
						this.dlgAdd = false
						this.getPro()
						if (response.status == 201){
							this.$message({
									message: "添加成功",
									type: 'success',
									duration: 1000
								});
								
							// 清空弹窗中的数据
							this.addProData = {
								name: "",
								leader: "",
								desc: ""
							};
								
							} else {
								this.$message({
									message: "添加失败",
									type: 'error',
									duration: 1000
								});
						}
					
					}
				})

			},
			
			
			// 编辑项目
			updatPro(){
				this.$refs.editProjectRef.validate(async res => {
					if(res){
						let response = await this.$http.updateProject(this.eidtProData);
						this.dlgEdit = false
						this.getPro()
						if (response.status == 200){
							this.$message({
									message: "编辑成功",
									type: 'success',
									duration: 1000
								});

							} else {
								this.$message({
									message: "编辑失败",
									type: 'error',
									duration: 1000
								});
						}
					}
				})

			},
			// 点击项目，进行路由跳转和更新vuex中的项目
			selectPro(pro){
				this.updatePro(pro)
				this.$router.push('/home')
				
			},
			...mapMutations(['updatePro']),
						

		},

		created(id) {
			this.getPro();
		}
		// async created(){
		// 	// 请求后端接口，获取所有项目的数据
		// 	let response = await this.$http.getPorject();
		// 	console.log("响应数据", response);
		// 	this.proList = response.data.results
		// }

	};
</script>

<style type="text/css" scoped>
	.projects {
		padding: 10px 20px 30px 20px;
	}

	/* 设置图标靠右 */
	.top_btn {
		text-align: right;
		padding-bottom: 5px;
		border-bottom: solid 2px #919191;
		margin-bottom: 20px;
	}

	.pro_list .el-card {
		height: 250px;
		margin-bottom: 20px;
	}

	/* 项目图标样式 */
	.icon {
		background: #409EFF;
		height: 250px;
		font: normal 100px/250px "microsoft yahei";
		text-align: center;
		color: #fff;
	}

	/* 项目信息样式 */
	.name {
		height: 180px;
		font: bold 32px/180px "microsoft yahei";
		text-align: center;
		color: #409EFF;
		border-bottom: solid 1px #bcbcbc;
		/* 设置鼠标放到项目名称上时，会变成一个手的样式 */
		cursor: pointer;
	}

	.info {
		height: 69px;
		font: normal 12px/69px "microsoft yahei";

	}

	/* 更多操作样式 */
	.el-dropdown-link {
		cursor: pointer;
		color: #409EFF;
		font-size: 14px;

	}

	.box-card {
		padding: 0px;
	}

	.add {
		font: normal 50px/250px "microsoft yahei";
		text-align: center;
		color: #BCBCBC;
	}
	/* 弹窗标题的样式 */
	.dlgtitle{
		font: bold 18px/18px "microsoft yahei";
		text-align: center;
		
	}
</style>
